<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>等比例列表排列</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../public/res/css/g.css" media="all">
</head>

<body class="comBody">
    <!-- <div class="taxBoxBk">
        <div class="layui-fluid">
            <div class="layui-card">
                
            </div>
        </div>
    </div> -->
    <div class="taxBoxBody flex overflow">
        <div class="taxTit">
            <form class="layui-form" action="">
                <ul>
                    <li>时间范围：</li>
                    <li><span class="bd foc"><input type="text" class="layui-input" id="date1"></span>
                    </li>
                    <li>
                        <div>
                            <div class="layui-form-item">
                                <div class="">
                                    <select name="city">
                                        <option value="">进项数据</option>
                                        <option value="0">进项数据0</option>
                                        <option value="1">进项数据1</option>
                                        <option value="2">进项数据2</option>
                                        <option value="3">进项数据3</option>
                                        <option value="4">进项数据4</option>
                                    </select>

                                </div>
                            </div>


                        </div>
                    </li>
                    <li>
                        <span class="bd foc">5465,5487,3142</span> 元
                    </li>
                </ul>
            </form>
        </div>
        <div class="taxBox">
            <div class="left">
                <div class="sqList">
                    <ul>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">1</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="70%" style="width: 70%;"><span
                                                class="layui-progress-text">70%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">2</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="50%" style="width: 50%;"><span
                                                class="layui-progress-text">50%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">3</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="23%" style="width: 23%;"><span
                                                class="layui-progress-text">23%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">4</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="63%" style="width: 63%;"><span
                                                class="layui-progress-text">63%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">5</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="45%" style="width: 45%;"><span
                                                class="layui-progress-text">45%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">6</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="38%" style="width: 38%;"><span
                                                class="layui-progress-text">38%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md4">
                                    <span class="pxDot">11</span>A商圈
                                </div>
                                <div class="layui-col-md8">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="98%" style="width: 98%;"><span
                                                class="layui-progress-text">98%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="ecBoxList">
                    <div class="ecBox flex overflow">
                        <div class="layui-card flex item">
                            <div class="layui-card-header">废票份数、金额（按发票版本划分）</div>
                            <div class="layui-card-body flex item">
                                <div class=" flex item" id="a1a"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ecBox flex overflow">
                        <div class="layui-card flex item">
                            <div class="layui-card-header">有效开票额（按发票版本划分）</div>
                            <div class="layui-card-body flex item">
                                <div class=" flex item" id="a1b"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ecBox flex overflow">
                        <div class="layui-card flex item">
                            <div class="layui-card-header">开票总额（按行业划分）</div>
                            <div class="layui-card-body flex item">
                                <div class=" flex item" id="a1c"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'tax', 'form', 'echarts','laydate'], function () {
            var opt = layui.tax,
                $ = layui.$,
                laydate = layui.laydate;
            var a1a = echarts.init(document.getElementById('a1a'));
            a1a.setOption(opt[0]);
            var a1b = echarts.init(document.getElementById('a1b'));
            a1b.setOption(opt[1]);
            var a1c = echarts.init(document.getElementById('a1c'));
            a1c.setOption(opt[2]);
            //执行一个laydate实例
            laydate.render({
                elem: '#date1'
                , range: true //或 range: '~' 来自定义分割字符
            });
        });
    </script>

</body>

</html>